<template>
  <div class="table-box">
    <el-table
      ref="secTable"
      style="width: 100%"
      :data="tableData"
      :header-cell-style="{
        background: '#fafafa',
        color: '#333',
        borderBottom: '1px solid #f0f0f0',
      }"
      v-bind="$attrs"
      :row-key="rowkey"
      v-on="$listeners"
      v-loading="loading"
      :size="size"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        :align="selectionAlign"
        :reserve-selection="reserveSelection"
        :selectable="checkSelectable"
      ></el-table-column>

      <!-- 文本数据渲染 -->
      <template v-for="(item, index) in tableHead || tableCol || []">
        <el-table-column
          v-if="
            slotType.includes(item.columnType) || slotType.includes(item.type) || slotType.includes(colType[item.prop])
          "
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :ffilter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template v-slot:header="scope">
            <slot :name="`${item.prop}Header`" :data="scope">{{ item.label }}</slot>
          </template>
          <template slot-scope="scope">
            <!-- input输入框组件 type是text/textarea 走这里-->
            <el-input
              v-if="inputType.includes(item.type) || inputType.includes(colType[item.prop])"
              :show-word-limit="item.showWrodLimit"
              :type="item.type || colType[item.prop]"
              :maxlength="item.maxlength"
              :minlength="item.minlength"
              :clearable="item.clearable || true"
              :show-password="item.showPassword"
              :prefix-icon="item.prefixicon"
              :suffix-icon="item.suffixIcon"
              :rows="item.rows"
              :autosize="item.autosize"
              :autocomplete="item.autocomplete"
              :name="item.name"
              :max="item.max"
              :min="item.min"
              :step="item.step"
              :resize="item.resize"
              :autofocus="item.autofocus"
              :form="item.form"
              :tabindex="item.tabindex"
              :validate-event="item.validateEvent"
              :disabled="item.disabled || disabledProp[item.prop] || scope.row.disabled || false"
              :placeholder="item.placeholder || `请输入${item.label}`"
              v-model="scope.row[item.prop]"
              @focus="item.focus && item.focus($event)"
              @blur="item.blur && item.blur($event)"
              @clear="item.clear && item.clear($event)"
              @change="item.change && item.change(scope.row)"
              @input="item.input && item.input($event)"
            >
            </el-input>
            <!-- select选择器组件 type是select/option 走这里-->

            <el-select
              v-else-if="selectType.includes(item.type) || selectType.includes(colType[item.prop])"
              v-model="scope.row[item.prop]"
              default-first-option
              :clearable="item.clearable || true"
              :disabled="item.disabled || disabledProp[item.prop] || scope.row.disabled || false"
              :remote="item.remote"
              :allow-create="item.allowCreate"
              :multiple="item.multiple"
              :filterable="item.filterable"
              @visible-change="item.visibleChange && item.visibleChange($event)"
              @remove-tag="item.removeTag && item.removeTag($event)"
              @clear="item.clear && item.clear($event)"
              @blur="item.blur && item.blur($event)"
              @focus="item.focus && item.focus($event)"
              @change="item.change && item.change($event)"
              :remote-method="
                item.remoteMethod ||
                ((query) => {
                  remoteMethod(query, item.prop);
                })
              "
              :placeholder="item.placeholder || `请选择${item.label}`"
            >
              <el-option
                v-for="(oItem, okey) in item.option || item.options || item.optionData || optionData[item.prop] || []"
                :key="okey"
                :label="(item.optionProps && oItem[item.optionProps.label]) || oItem.label"
                :value="(item.optionProps && oItem[item.optionProps.value]) || oItem.value"
              >
              </el-option>
            </el-select>

            <div v-else-if="item.type === 'tag'">
              <el-tag
                :type="item.config && item.config.type"
                :closable="item.config && item.config.closable"
                :hit="item.config && item.config.hit"
                @click="item.config && item.config.click(scope)"
                @close="item.config && item.config.close(scope)"
                style="margin: 0 5px 5px 0"
                v-for="(tag, index) in scope.row[item.prop] && scope.row[item.prop].split(',')"
                :key="index"
              >
                {{ tag }}</el-tag
              >
            </div>
            <template v-else-if="item.type === 'status'">
              <span class="ant-badge ant-badge-status">
                <i v-if="item.pendingLoading && scope.row[item.prop] == 'pending'" class="el-icon-loading"></i>
                <span
                  v-else
                  :class="`ant-badge-status-dot ant-badge-status-${
                    (item.statusClass && item.statusClass(scope)) || 'pending'
                  }`"
                ></span>
                <span class="ant-badge-status-text">
                  {{ (item.formatter && item.formatter(scope)) || scope.row[item.prop] }}
                </span></span
              >
            </template>

            <!-- 插槽 type是slot 走这里-->
            <slot v-else :name="item.slotName || item.field || item.prop" :data="scope" />
          </template>
          <!-- <template v-slot="scope" v-else>
            <slot :name="item.slotName || item.field || item.prop" :data="scope" />
          </template> -->
        </el-table-column>
        <!-- 操作 type是operation 走这里-->
        <el-table-column
          :width="item.width"
          :label="item.label"
          :fixed="item.fixed || 'right'"
          :align="item.align || align"
          v-else-if="item.type === 'operation' || item.prop === 'operation'"
          :key="index"
        >
          <template v-slot:header="scope">
            <slot :name="`${item.prop || item.type}Header`" :data="scope">{{ item.label }}</slot>
          </template>
          <template v-slot="scope">
            <template v-for="(child, cIndex) in item.children">
              <el-tooltip
                v-if="child.iconClass"
                :key="`icon_${cIndex}`"
                effect="dark"
                :content="child.tooltipContent && child.tooltipContent(scope)"
                placement="top"
              >
                <i
                  @click="child.click && child.click(scope, $event)"
                  style="cursor: pointer; margin-right: 5px"
                  class="iconfont"
                  :class="child.iconClass(scope)"
                ></i>
              </el-tooltip>
            </template>
            <el-button
              v-for="(child, cIndex) in item.children"
              :icon="child.icon"
              :class="child.class"
              :type="child.type || 'text'"
              :key="cIndex"
              :style="child.style"
              v-if="!(child.hide && child.hide(scope))"
              :disabled="
                (child.disabled && (typeof child.disabled == 'boolean' ? child.disabled : child.disabled(scope))) ||
                item.disabled ||
                (item.disabledIndex && item.disabledIndex.includes(scope.$index))
              "
              :circle="child.circle || item.circle"
              :round="child.round || item.round"
              :plain="child.plain || item.plain"
              @click="child.click && child.click(scope, tableData, $event)"
            >
              {{
                typeof child.title == "function"
                  ? child.title(scope)
                  : child.title || typeof child.label == "function"
                  ? child.label(scope)
                  : child.label
              }}</el-button
            >
          </template>
        </el-table-column>
        <!-- 默认情况 -->
        <el-table-column
          v-else
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :ffilter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template v-slot:header="scope">
            <slot :name="`${item.prop}Header`" :data="scope">{{ item.label }}</slot>
          </template>
        </el-table-column>
      </template>
      <template slot="empty"> <slot name="empty">暂无数据</slot></template>
    </el-table>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "secTable",
  components: {},
  props: {
    reserveSelection: Boolean,
    selection: Boolean,
    size: {
      type: String,
      default: "medium",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    loadingProp: {
      type: Object,
      default: () => {},
    },
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    disabledProp: {
      //让哪个form表单disabled 例如  disabledProp:{name:true} 让字段为name的表单失效
      type: Object,
      default: () => {
        return {};
      },
    },
    // 行的类型
    colType: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tableData: Array,
    tableCol: Array,
    tableHead: Array,
    align: {
      type: String,
      default: "left",
    },
    selectionAlign: {
      type: String,
      default: "center",
    },
    checkSelectable: {
      type: Function,
      default: () => {
        return true;
      },
    },
    rowkey: {
      type: String | Function,
      default: "id",
    },
  },
  data() {
    return {
      slotType: ["slot", "select", "option", "text", "textarea", "tag", "status", "number"],
      selectType: ["select", "option"],
      inputType: ["text", "textarea", "number"],
    };
  },
  mounted() {},
  methods: {
    //用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
    toggleRowSelection(row, selected) {
      this.$refs.secTable.toggleRowSelection(row, selected);
    },
    //用于多选表格，清空用户的选择
    clearSelection() {
      this.$refs.secTable.clearSelection();
    },
    doLayout() {
      this.$refs.secTable.doLayout();
    },
  },

  computed: {},
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          newVal &&
            newVal.forEach((item) => {
              if (item.selected_flag) {
                this.$refs.secTable.toggleRowSelection(item);
              }
            });
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.ant-badge-dot {
  width: 6px;
  height: 6px;
  background: #f5222d;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 1px #fff;
  box-shadow: 0 0 0 1px #fff;
}
.ant-badge-status-dot {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
}

.ant-badge-status-success,
.ant-badge-status-over {
  background-color: #52c41a;
}
.ant-badge-status-pending {
  position: relative;
  background-color: #436fff;
}
.ant-badge-status-pending-ani {
  position: relative;
  background-color: #436fff;
}
.ant-badge-status-default,
.ant-badge-status-close {
  background-color: #d9d9d9;
}
.ant-badge-status-error {
  background-color: #f5222d;
}
.ant-badge-status-warning {
  background-color: #faad14;
}
.ant-badge-status-pending-ani:after {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border: 1px solid #436fff;
  border-radius: 50%;
  -webkit-animation: antStatusProcessing 1.2s ease-in-out infinite;
  animation: antStatusProcessing 1.2s ease-in-out infinite;
  content: "";
}

@keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }

  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}
.ant-badge-status-text {
  margin-left: 5px;
}
</style>
